<template>
  <div class="home-page">
    <!-- 顶部导航栏 -->
    <!-- 欢迎区域 -->
    <el-card class="welcome-card">
      <div class="welcome-content">
        <div class="welcome-text">
          <h1>欢迎使用因子管理子系统</h1>
          <p>公募基金因子管理平台，支持因子接入、因子树管理、衍生因子创建和风格因子管理</p>
          <div class="feature-list">
            <div class="feature-item">
              <el-icon><DataLine /></el-icon>
              <span>因子接入：天天基金数据源、配置化接入、Python脚本导入</span>
            </div>
            <div class="feature-item">
              <el-icon><Share /></el-icon>
              <span>因子树管理：多业务场景的因子分类管理</span>
            </div>
            <div class="feature-item">
              <el-icon><Connection /></el-icon>
              <span>衍生因子：多因子加权计算和复合因子创建</span>
            </div>
            <div class="feature-item">
              <el-icon><TrendCharts /></el-icon>
              <span>风格因子：经典风格模型支持</span>
            </div>
          </div>
        </div>
        <div class="welcome-actions">
          <el-button class="blue-solid-btn" size="large" @click="showDemo = true">
            功能演示
          </el-button>
          <div class="header-actions">
            <el-button class="blue-solid-btn" size="large" @click="showHelp = true">使用帮助</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 统计卡片 -->
    <el-card class="stats-card">
      <template #header>
        <div class="card-header">
          <span>系统概览</span>
          <el-button type="primary" size="small" @click="refreshStats">刷新</el-button>
        </div>
        <div class="fund-info-container"></div>
      </template>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><DataAnalysis /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.dataSourceCount }}</div>
                <div class="stat-label">数据源</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><DataLine /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.factorCount }}</div>
                <div class="stat-label">基础因子</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><Connection /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.derivedFactorCount }}</div>
                <div class="stat-label">衍生因子</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.styleFactorCount }}</div>
                <div class="stat-label">风格因子</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 功能模块 -->
    <el-row :gutter="20" class="modules-row">
      <el-col :span="12">
        <el-card class="module-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>快速导航</span>
            </div>
          </template>
          <div class="quick-nav">
            <div class="nav-item" @click="$router.push('/factor')">
              <div class="nav-icon">
                <el-icon><DataLine /></el-icon>
              </div>
              <div class="nav-content">
                <div class="nav-title">基础因子管理</div>
                <div class="nav-desc">管理基础因子数据，支持多种数据源接入</div>
              </div>
              <el-icon class="arrow"><ArrowRight /></el-icon>
            </div>
            <div class="nav-item" @click="$router.push('/derived-factor')">
              <div class="nav-icon">
                <el-icon><Connection /></el-icon>
              </div>
              <div class="nav-content">
                <div class="nav-title">衍生因子管理</div>
                <div class="nav-desc">创建复合因子，支持多因子加权计算</div>
              </div>
              <el-icon class="arrow"><ArrowRight /></el-icon>
            </div>
            <div class="nav-item" @click="$router.push('/style-factor')">
              <div class="nav-icon">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="nav-content">
                <div class="nav-title">风格因子管理</div>
                <div class="nav-desc">管理风格投资因子，支持经典模型</div>
              </div>
              <el-icon class="arrow"><ArrowRight /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="module-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>快速导航</span>
            </div>
          </template>
          <div class="quick-nav">
            <div class="nav-item" @click="$router.push('/data-source')">
              <div class="nav-icon">
                <el-icon><DataAnalysis /></el-icon>
              </div>
              <div class="nav-content">
                <div class="nav-title">数据源管理</div>
                <div class="nav-desc">配置数据源，支持Python脚本接入</div>
              </div>
              <el-icon class="arrow"><ArrowRight /></el-icon>
            </div>
            <div class="nav-item" @click="$router.push('/factor-tree')">
              <div class="nav-icon">
                <el-icon><Share /></el-icon>
              </div>
              <div class="nav-content">
                <div class="nav-title">因子树管理</div>
                <div class="nav-desc">组织因子分类，支持多业务场景</div>
              </div>
              <el-icon class="arrow"><ArrowRight /></el-icon>
            </div>
            <div class="nav-item">
              <div class="nav-icon">
                <el-icon><Cpu /></el-icon>
              </div>
              <div class="nav-content">
                <div class="nav-title">AI大模型分析</div>
                <div class="nav-desc">支持大模型分析因子数据，构建用户画像</div>
              </div>
              <el-icon class="arrow"><ArrowRight /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 使用帮助对话框 -->
    <el-dialog title="使用帮助" v-model="showHelp" width="800px">
      <div class="help-content">
        <h3>系统功能介绍</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="因子接入">
            支持Wind、聚源、天天基金等数据源配置化接入，降低开发工作量。同时支持Python脚本方式接入数据，可快速实现对复杂数据的加工处理。
          </el-descriptions-item>
          <el-descriptions-item label="因子树管理">
            对因子在不同业务场景中的因子类别层级进行管理，将因子库中因子数据以树的结构清晰展示和分类，便于因子的查看与使用。
          </el-descriptions-item>
          <el-descriptions-item label="衍生因子创建">
            平台提供通过多因子加权新建衍生复合因子的功能，研究人员可自创因子用于研究和策略构建、组合构建的工作中。
          </el-descriptions-item>
          <el-descriptions-item label="风格投资因子管理">
            平台提供通过多因子加权新建风格投资因子分类的功能，支持Fama-French等经典风格模型。
          </el-descriptions-item>
        </el-descriptions>

        <h3>使用流程</h3>
        <el-steps :active="1" direction="vertical">
          <el-step title="配置数据源" description="在数据源管理页面配置所需的数据源"></el-step>
          <el-step title="创建基础因子" description="在因子管理页面创建或导入基础因子"></el-step>
          <el-step title="组织因子树" description="在因子树管理页面按业务场景组织因子分类"></el-step>
          <el-step title="创建衍生因子" description="在衍生因子管理页面创建复合因子"></el-step>
          <el-step title="管理风格因子" description="在风格因子管理页面创建风格投资因子"></el-step>
        </el-steps>
      </div>
    </el-dialog>
    <!-- 功能演示对话框 -->
    <el-dialog title="功能演示" v-model="showDemo" width="1000px">
      <div class="demo-content">
        <el-tabs v-model="activeDemoTab">
          <el-tab-pane label="因子接入演示" name="ingestion">
            <div class="demo-section">
              <h4>数据源配置</h4>
              <el-card>
                <pre><code>{
  "name": "天天基金数据库",
  "type": "TTJJ",
  "config": {
    "apiUrl": "https://api.wind.com.cn",
    "apiKey": "your_api_key"
  }
}</code></pre>
              </el-card>
            </div>
            <div class="demo-section">
              <h4>Python脚本接入</h4>
              <el-card>
                <pre><code>import pandas as pd
import requests
def fetch_fund_data(fund_code, start_date, end_date):
    # 自定义数据获取逻辑
    data = requests.get(f"api/fund/{fund_code}")
    return pd.DataFrame(data.json())
# 返回处理后的数据
result = fetch_fund_data(fund_code, start_date, end_date)</code></pre>
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane label="衍生因子演示" name="derived">
            <div class="demo-section">
              <h4>多因子加权计算</h4>
              <el-card>
                <pre><code>{
  "formula": "MA5 * 0.6 + MA10 * 0.4",
  "components": [
    {"factorId": 1, "weight": 0.6, "operation": "MULTIPLY"},
    {"factorId": 2, "weight": 0.4, "operation": "MULTIPLY"}
  ]
}</code></pre>
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane label="风格因子演示" name="style">
            <div class="demo-section">
              <h4>Fama-French三因子模型</h4>
              <el-card>
                <pre><code>{
  "styleType": "VALUE",
  "model": "FAMA_FRENCH_3F",
  "components": [
    {"factorId": 1, "weight": 1.0, "operation": "ADD"},
    {"factorId": 2, "weight": -1.0, "operation": "ADD"}
  ]
}</code></pre>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  DataLine,
  Connection,
  TrendCharts,
  DataAnalysis,
  Share,
  ArrowRight,
  Cpu
} from '@element-plus/icons-vue'
import axios from "axios";

// 响应式数据
const showHelp = ref(false)
const showDemo = ref(false)
const activeDemoTab = ref('ingestion')
const navDataList = ref([]);
const formRef = ref(null);

const factors = ref([]);
const fundDetails = ref([]);
const dialogVisible = ref(false);
const formatDate = (dateString) => {
  const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
  return new Date(dateString).toLocaleDateString('zh-CN', options);
};

const stats = ref({
  dataSourceCount: 0,
  factorCount: 0,
  derivedFactorCount: 0,
  styleFactorCount: 0
})
// 获取统计数据
const loadStats = async () => {
  try {
    const response = await axios.get('http://localhost:8080/system/get/statistics')
    if (response.data) {
      stats.value.dataSourceCount = response.data[0]
      stats.value.derivedFactorCount = response.data[2]
      stats.value.factorCount = response.data[1]
      stats.value.styleFactorCount = response.data[3]
      console.log(stats.value[0])
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadStats()
})
</script>

<style scoped>
.home-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.main-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  margin-bottom: 20px;
  border-radius: 8px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.subtitle {
  font-size: 14px;
  opacity: 0.8;
}

.welcome-card {
  margin-bottom: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-actions,
.header-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

/* 不透明天蓝色按钮样式 */
.blue-solid-btn {
  color: #fff;
  background: #47a3ff;
  border: 1.5px solid #47a3ff;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, border 0.2s;
  min-width: 110px;
  height: 40px;
  font-size: 16px;
  box-sizing: border-box;
}
.blue-solid-btn:hover,
.blue-solid-btn:focus {
  background: #1d7fe7;
  border-color: #1d7fe7;
  color: #fff;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.feature-item .el-icon {
  font-size: 18px;
  color: #ffd700;
}

.stats-card {
  margin-bottom: 20px;
}

.stat-card {
  border: none;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.modules-row {
  margin-bottom: 20px;
}

.module-card {
  height: 100%;
}

.quick-nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border-radius: 8px;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background-color: #e3f2fd;
  transform: translateX(5px);
}

.nav-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

.nav-content {
  flex: 1;
}

.nav-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 5px;
}

.nav-desc {
  font-size: 12px;
  color: #909399;
}

.arrow {
  color: #c0c4cc;
  font-size: 16px;
}

.system-status {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.status-item:last-child {
  border-bottom: none;
}

.status-label {
  font-size: 14px;
  color: #606266;
}

.activity-card {
  margin-bottom: 20px;
}

.activity-content {
  margin-left: 10px;
}

.activity-title {
  font-weight: 600;
  color: #303133;
  margin-bottom: 5px;
}

.activity-desc {
  font-size: 12px;
  color: #909399;
}

.empty-text {
  text-align: center;
  color: #909399;
  padding: 40px 0;
}

.help-content h3 {
  margin: 20px 0 15px 0;
  color: #303133;
}

.demo-content {
  max-height: 500px;
  overflow-y: auto;
}

.demo-section {
  margin-bottom: 20px;
}

.demo-section h4 {
  margin: 0 0 10px 0;
  color: #303133;
}

.demo-section pre {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-content {
    flex-direction: column;
    text-align: center;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }

  .welcome-actions {
    margin-top: 20px;
  }
}
</style>